<template>
    <div>
        <base-dist-picker-international
            v-model="distValue"
            :placeholder="placeholder"
            :showOneLine="showOneLine"
            :showDefaultCountry="showDefaultCountry"
            :noDefaultCountry="noDefaultCountry"
            :module="module"
            @input="distPickerInputHandle"
        />

    </div>
    
</template>
  
<script>
import { t } from '@src/locales';
import { isObject, isArray } from '@src/util/type';

import { setBaseDistValue } from '@src/util/addressUtil';
import useFormMultiLanguage from '@hooks/useFormMultiLanguage'
// 国际化灰度
const { internationalGray } = useFormMultiLanguage()
  
export default {
    // 组合国际化区域选择组件和非国际化区域选择组件
    name: 'base-dist',
    data() {
        return {
            internationalGray,
            distValue: [],
        }
    },

    props:{
        // 搜索功能，组件传入的一般是数组，页面中调用一般是对象类型
        value: {
            type: [Array,Object],
            default: () => ({}),
        },

        placeholder: {
            type: String,
            default: t('common.placeholder.select'),
        },

        // 国家和省市区展示在一行（搜索组件需要展示一行），默认展示两行
        showOneLine: {
            type: Boolean,
            default: false
        },

        // 是否默认选中中国
        showDefaultCountry: {
            type: Boolean,
            default: true
        },
        // 是否不默认选中中国（强制）
        noDefaultCountry: {
            type: Boolean,
            default: false
        },
        // 模块
        module: {
            type: String,
            default: '',
        },
    },

    watch: {
        value: {
            immediate: true,
            deep: true,
            handler(newValue) {
                if (isArray(newValue)) {
                    this.distValue = newValue;
                } else if (isObject(newValue)) {
                    this.distValue = setBaseDistValue(newValue)
                } else {
                    this.distValue = []
                }
            }
        }
    },

    methods:{
        distPickerInputHandle(value){
            let [ country, province, city, dist, street ] = value;

            let newValue = {
                country: country || '', 
                province, 
                city, 
                dist,
                ...(street && { street })
            };

            // 当传入的value是数组时，返回的也是数组，当传入的是对象，返回的也是对象
            if(isArray(this.value)){
                newValue = value
            }

            this.$emit('input', newValue)
        }
    }
}
</script>
  